<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border</title>
  <style>
    *{
      margin: 0;
      padding: 0;
      list-style: none;
    }
    .border{
      margin: 50px auto;
      position: relative;
      width: 500px;
      height: 700px;
      border: 1px solid gray;
      /* display: flex; */
      /* flex-direction: column; */
    }
    .border>div{
      width: 300px;
      height: 80px;
    }
    .border-width{
      border-style: dashed dotted double groove;
      border-width: 1px 3px 5px 7px;
      border-color: blueviolet darkcyan gold;
    }
    .border-radius{
      border: 2px outset fuchsia;
      border-radius: 10px 20px 30px 40px;
    }
    .border-shadow{
      border: 1px solid gray;
      box-shadow: 10px 10px 10px 1px gray;
    }
    .border>.border-image{
      /* width: 100%; */
      height: 220px;
      font-size: 12px;
      border: 15px solid gray;
      border-image: url(../../img/780.jpg) 100% 100% round;
      /* border-image-source: url(../../img/780.jpg); */
      /* border-image-slice: 10px 10px 10px 10px fill; */
      /* border-image-width: 10px; */
      /* border-image-outset: 10px; */
      /* border-image-repeat: round repeat; */
    }
  </style>
</head>
<body>
  <div class="border">
    <div class="border-width">
      设置或检索对象的边框宽度。
    </div>
    <div class="border-radius"></div>
    <div class="border-shadow"></div>
    <div class="border-image">
      <' border-image-source '>：
      设置或检索对象的边框是否用图像定义样式或图像来源路径。
      <' border-image-slice '>：
      设置或检索对象的边框背景图的分割方式。
      <' border-image-width '>：
      设置或检索对象的边框厚度。
      <' border-image-outset '>：
      设置或检索对象的边框背景图的扩展。
      <' border-image-repeat '>：
      设置或检索对象的边框图像的平铺方式。
      stretch：
指定用拉伸方式来填充边框背景图。
repeat：
指定用平铺方式来填充边框背景图。当图片碰到边界时，如果超过则被截断。
round：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的大小直至正好可以铺满整个边框。
space：
指定用平铺方式来填充边框背景图。图片会根据边框的尺寸动态调整图片的之间的间距直至正好可以铺满整个边框。
    </div>
    <div class="border-"></div>
    <div class="border-"></div>
  </div>
</body>
</html>